<template>
  <base-layout>
    <div class="home-container">
      <!-- 顶部统计卡片 -->
      <a-row :gutter="[16, 16]" class="stats-row">
        <a-col :span="4">
          <a-card class="stat-card points-total-card">
            <div class="stat-icon">
              <trophy-outlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">总积分</div>
              <div class="stat-value">286</div>
              <div class="stat-unit">分</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card class="stat-card code-card">
            <div class="stat-icon">
              <code-outlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">代码量</div>
              <div class="stat-value">15000</div>
              <div class="stat-unit">行</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card class="stat-card project-card">
            <div class="stat-icon">
              <project-outlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">项目数</div>
              <div class="stat-value">4</div>
              <div class="stat-unit">个</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card class="stat-card oj-card">
            <div class="stat-icon">
              <trophy-outlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">OJ完成</div>
              <div class="stat-value">31</div>
              <div class="stat-unit">题</div>
            </div>
          </a-card>
        </a-col>
        <a-col :span="5">
          <a-card class="stat-card blog-card">
            <div class="stat-icon">
              <read-outlined />
            </div>
            <div class="stat-info">
              <div class="stat-title">博客数</div>
              <div class="stat-value">15</div>
              <div class="stat-unit">篇</div>
            </div>
          </a-card>
        </a-col>
      </a-row>

      <!-- 积分排行和代码分布 -->
      <a-row :gutter="[16, 16]" class="chart-row">
        <a-col :span="12">
          <a-card class="rank-card" title="积分排行榜">
            <div class="rank-header">
              <div class="rank-title">
                <crown-outlined class="rank-icon" />
                <span>当前排名第4名，继续加油！</span>
              </div>
              <div class="rank-points">
                当前积分：<span class="points-highlight">286</span> 分
              </div>
            </div>
            <a-table :columns="rankColumns" :data-source="rankData" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'rank'">
                  <span :class="getRankClass(record.rank)">{{ record.rank }}</span>
                </template>
                <template v-if="column.key === 'points'">
                  <span :class="{ 'points-highlight': record.studentId === '2021004' }">{{ record.points }}</span>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card class="chart-card" title="代码语言分布">
            <v-chart class="chart" :option="pieOption" autoresize />
          </a-card>
        </a-col>
      </a-row>

      <!-- OJ完成趋势和积分记录 -->
      <a-row :gutter="[16, 16]" class="chart-row">
        <a-col :span="12">
          <a-card class="chart-card" title="OJ完成趋势">
            <v-chart class="chart" :option="lineOption" autoresize />
          </a-card>
        </a-col>
        <a-col :span="12">
          <a-card title="积分记录" class="points-card">
            <a-table :columns="pointsColumns" :data-source="pointsData" :pagination="false">
              <template #bodyCell="{ column, record }">
                <template v-if="column.key === 'points'">
                  <span class="points-value">+{{ record.points }}</span>
                </template>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </div>
  </base-layout>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart, LineChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
} from 'echarts/components'
import VChart from 'vue-echarts'
import BaseLayout from '@/components/layout/BaseLayout.vue'
import {
  CodeOutlined,
  ProjectOutlined,
  TrophyOutlined,
  ReadOutlined,
  CrownOutlined
} from '@ant-design/icons-vue'

use([
  CanvasRenderer,
  PieChart,
  LineChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent,
  GridComponent
])

// 积分排行榜数据
const rankColumns = [
  { title: '排名', dataIndex: 'rank', key: 'rank', width: 80 },
  { title: '学号', dataIndex: 'studentId', key: 'studentId' },
  { title: '姓名', dataIndex: 'name', key: 'name' },
  { title: '积分', dataIndex: 'points', key: 'points' }
]

const rankData = [
  { rank: 1, studentId: '2021001', name: '张三', points: 356 },
  { rank: 2, studentId: '2021002', name: '李四', points: 312 },
  { rank: 3, studentId: '2021003', name: '王五', points: 298 },
  { rank: 4, studentId: '2021004', name: '赵六', points: 286 },
  { rank: 5, studentId: '2021005', name: '钱七', points: 265 }
]

// 积分记录数据
const pointsColumns = [
  { 
    title: '时间', 
    dataIndex: 'time', 
    key: 'time',
    width: '140px',
    ellipsis: true 
  },
  { 
    title: '积分项', 
    dataIndex: 'type', 
    key: 'type',
    width: '80px'
  },
  { 
    title: '详情', 
    dataIndex: 'detail', 
    key: 'detail',
    ellipsis: true,
    width: '200px'
  },
  { 
    title: '积分值', 
    dataIndex: 'points', 
    key: 'points', 
    width: '80px',
    align: 'right'
  }
]

const pointsData = [
  { time: '2024-03-10 15:00', type: '签到', detail: '每日签到', points: 1 },
  { time: '2024-03-10 16:30', type: '题库', detail: '完成OJ题目：冒泡排序', points: 10 },
  { time: '2024-03-09 14:20', type: '博客', detail: '发表博客：Vue3学习笔记', points: 5 },
  { time: '2024-03-09 11:00', type: '证书', detail: '提交证书：计算机二级', points: 8 }
]

// 饼图配置
const pieOption = {
  tooltip: {
    trigger: 'item',
    formatter: '{a} <br/>{b}: {c} ({d}%)'
  },
  legend: {
    orient: 'vertical',
    right: 10,
    top: 'center'
  },
  series: [
    {
      name: '代码分布',
      type: 'pie',
      radius: ['50%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: {
        borderRadius: 10,
        borderColor: '#fff',
        borderWidth: 2
      },
      label: {
        show: false
      },
      emphasis: {
        label: {
          show: true,
          fontSize: 20,
          fontWeight: 'bold'
        }
      },
      data: [
        { value: 3, name: 'C' },
        { value: 10, name: 'Java' },
        { value: 18, name: 'Python' }
      ]
    }
  ]
}

// 折线图配置
const lineOption = {
  tooltip: {
    trigger: 'axis',
    formatter: function(params) {
      const data = params[0];
      return `${data.name}<br/>${data.marker}完成数量：${data.value}题`;
    }
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '15%',
    containLabel: true
  },
  dataZoom: [
    {
      type: 'slider',
      show: true,
      xAxisIndex: [0],
      start: 0,
      end: 50,
      height: 20,
      bottom: 0,
      borderColor: 'transparent',
      backgroundColor: '#f5f5f5',
      fillerColor: '#e6f4ff',
      handleStyle: {
        color: '#1890ff'
      },
      moveHandleStyle: {
        color: '#1890ff'
      },
      selectedDataBackground: {
        lineStyle: {
          color: '#1890ff'
        },
        areaStyle: {
          color: '#1890ff'
        }
      },
      emphasis: {
        handleStyle: {
          color: '#40a9ff'
        }
      }
    }
  ],
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: [
      '2024-02-01', '2024-02-02', '2024-02-03', '2024-02-04', '2024-02-05',
      '2024-02-06', '2024-02-07', '2024-02-08', '2024-02-09', '2024-02-10',
      '2024-02-11', '2024-02-12', '2024-02-13', '2024-02-14', '2024-02-15',
      '2024-02-16', '2024-02-17', '2024-02-18', '2024-02-19', '2024-02-20',
      '2024-02-21', '2024-02-22', '2024-02-23', '2024-02-24', '2024-02-25',
      '2024-02-26', '2024-02-27', '2024-02-28', '2024-02-29', '2024-03-01'
    ],
    axisLabel: {
      formatter: function(value) {
        return value.slice(5); // 只显示月-日
      }
    }
  },
  yAxis: {
    type: 'value',
    name: '完成题数',
    minInterval: 1,
    splitLine: {
      lineStyle: {
        type: 'dashed',
        color: '#eee'
      }
    }
  },
  series: [
    {
      data: [2, 3, 1, 4, 2, 5, 3, 4, 6, 2, 4, 5, 3, 4, 5, 6, 3, 4, 5, 6, 4, 5, 6, 7, 5, 6, 7, 8, 6, 8],
      type: 'line',
      smooth: true,
      areaStyle: {
        opacity: 0.3
      },
      itemStyle: {
        color: '#1890ff'
      },
      lineStyle: {
        width: 2
      }
    }
  ]
}

const getRankClass = (rank) => {
  if (rank === 1) return 'rank-first'
  if (rank === 2) return 'rank-second'
  if (rank === 3) return 'rank-third'
  return ''
}
</script>

<style scoped>
.home-container {
  padding: 24px;
  background: #f0f2f5;
}

.stats-row,
.chart-row {
  margin-bottom: 24px;
}

.stat-card {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 20px;
  transition: all 0.3s;
  color: rgba(0, 0, 0, 0.85);
  background: #fff;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.code-card {
  background: linear-gradient(135deg, rgba(24, 144, 255, 0.1) 0%, rgba(54, 207, 201, 0.1) 100%);
}

.project-card {
  background: linear-gradient(135deg, rgba(82, 196, 26, 0.1) 0%, rgba(115, 209, 61, 0.1) 100%);
}

.oj-card {
  background: linear-gradient(135deg, rgba(114, 46, 209, 0.1) 0%, rgba(179, 127, 235, 0.1) 100%);
}

.blog-card {
  background: linear-gradient(135deg, rgba(235, 47, 150, 0.1) 0%, rgba(247, 89, 171, 0.1) 100%);
}

.stat-icon {
  font-size: 36px;
  color: #1890ff;
  margin-right: 20px;
  opacity: 0.85;
}

.stat-info {
  color: rgba(0, 0, 0, 0.85);
}

.stat-title {
  font-size: 14px;
  margin-bottom: 8px;
  color: rgba(0, 0, 0, 0.45);
}

.stat-value {
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
  color: rgba(0, 0, 0, 0.85);
}

.stat-unit {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.45);
}

.rank-card,
.chart-card,
.points-card {
  height: 420px;
}

.rank-header {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rank-title {
  display: flex;
  align-items: center;
  color: rgba(0, 0, 0, 0.85);
  font-size: 15px;
  font-weight: 500;
}

.rank-icon {
  font-size: 20px;
  margin-right: 8px;
  color: #faad14;
}

.rank-first {
  color: #faad14;
  font-weight: 500;
}

.rank-second {
  color: #8c8c8c;
  font-weight: 500;
}

.rank-third {
  color: #b37feb;
  font-weight: 500;
}

.rank-points {
  font-size: 15px;
  color: rgba(0, 0, 0, 0.65);
}

.points-highlight {
  font-size: 20px;
  font-weight: 500;
  color: #faad14;
  margin: 0 4px;
}

.points-value {
  font-weight: 500;
  color: #52c41a;
}

.chart {
  height: 340px;
}

:deep(.ant-card) {
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  height: 100%;
  display: flex;
  flex-direction: column;
}

:deep(.ant-card-head) {
  border-bottom: 1px solid #f0f0f0;
  padding: 16px 20px;
  min-height: auto;
  flex-shrink: 0;
}

:deep(.ant-card-body) {
  padding: 20px;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

:deep(.ant-table-wrapper) {
  flex: 1;
  overflow: auto;
}

:deep(.ant-table) {
  font-size: 14px;
}

:deep(.ant-table-thead > tr > th) {
  background: #fafafa;
  font-weight: 500;
  color: rgba(0, 0, 0, 0.85);
  padding: 12px 16px;
  white-space: nowrap;
}

:deep(.ant-table-tbody > tr > td) {
  padding: 12px 16px;
  white-space: nowrap;
}

:deep(.ant-table-cell-ellipsis) {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

:deep(.points-card .ant-table-tbody > tr > td) {
  font-size: 13px;
}

.points-total-card {
  background: linear-gradient(135deg, rgba(250, 173, 20, 0.1) 0%, rgba(255, 216, 102, 0.1) 100%);
}
</style> 